<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
        .content {
            width: 200px;
            height: 200px;
            border: 1px solid #333;
            font-size: 40px;
            text-align: center;
            line-height: 200px;
        }

        button.active {
            background-color: rgb(180, 169, 48);
        }
    </style>
</head>

<body>
<div id="app">
    <button :class="{active: activeIndex===0}" @click="switchTab(0)">标题1</button>
    <button :class="{active: activeIndex===1}" @click="switchTab(1)">标题2</button>
    <button :class="{active: activeIndex===2}" @click="switchTab(2)">标题3</button>
    <div class="content" v-show="activeIndex===0">内容1</div>
    <div class="content" v-show="activeIndex===1">内容2</div>
    <div class="content" v-show="activeIndex===2">内容3</div>
</div>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            tabs: [
                {
                    title: '标题1',
                    content: '内容1'
                },
                {
                    title: '标题2',
                    content: '内容2'
                },
                {
                    title: '标题3',
                    content: '内容3'
                },
                {
                    title: '标题4',
                    content: '内容4'
                }
            ],
            activeIndex: 0
        },
        methods: {
            switchTab(index) {
                this.activeIndex = index;
            }
        }
    })
</script>
</body>

</html>